import './index.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'

/**
 * Geometry
 */
const geometry = new THREE.BoxGeometry(3, 1, 1,64,64,64);


const vertex = `
    // glsl-rotation-3d
    mat4 rotationMatrix(vec3 axis, float angle) {
        axis = normalize(axis);
        float s = sin(angle);
        float c = cos(angle);
        float oc = 1.0 - c;
        
        return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
                    oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
                    oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
                    0.0,                                0.0,                                0.0,                                1.0);
    }

    vec3 rotate(vec3 v, vec3 axis, float angle) {
        mat4 m = rotationMatrix(axis, angle);
        return (m * vec4(v, 1.0)).xyz;
    }

    uniform float uTime;
    varying vec2 vUv;

    const float PI = 3.1415926;
    void main(){
        vUv = uv;
        vec3 axis = vec3(1.0,0.0,0.0);
        float angle = position.x + uTime;
        vec3 newPos = rotate(position,axis,angle);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
    }
`

const fragment = `
    varying vec2 vUv;
    void main(){ 
        vec3 color1 = vec3(0.847, 0.204, 0.373);
        vec3 color2 = vec3(1.0);
        float mixer = step(0.5, fract(vUv.y * 3.0));
        vec3 color = mix(color1, color2, mixer);
        gl_FragColor = vec4(color,1.0);
    }
`

/**
 * Matetrial
 */
const material = new THREE.ShaderMaterial({
    uniforms: {
        uTime: {
            value: 0
        }
    },
    // 解决抗锯齿
    extensions: {
        derivatives: true,
    },
    vertexShader: vertex,
    fragmentShader: fragment,
    // wireframe: true,
})

/**
 * Mesh
 */
const mesh = new THREE.Mesh(geometry, material)

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3

/**
 * Scene
 */
const scene = new THREE.Scene()
scene.add(mesh)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)
renderer.setClearColor('#f19191')



/**
 * OrbitControls
 */
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true



/**
 * Update
 */
let clock = new THREE.Clock();
let elpasedTime = 0;
const tick = () => {
    elpasedTime = clock.getElapsedTime();
    material.uniforms.uTime.value = elpasedTime;
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

